<template>
  <div class="student-register-container">
    <div class="student-register-header">
      <h1>学生入学登记</h1>
      <form class="student-register-form" @submit.prevent="handleSubmit">
        <!-- 昵称 -->
        <div class="form-group">
          <label for="nickname">昵称 <span class="required">*</span></label>
          <input type="text" id="nickname" v-model.trim="formData.nickname" placeholder="请输入你的昵称（不暴露真实姓名）" required
            maxlength="20">
          <p class="hint">最多20个字符，建议使用化名保护隐私</p>
        </div>

        <!-- 性别 -->
        <div class="form-group">
          <label>性别 <span class="required">*</span></label>
          <div class="radio-group">
            <label class="radio-item">
              <input type="radio" name="gender" v-model="formData.gender" value="male" required>男</label>
            <label class="radio-item">
              <input type="radio" name="gender" v-model="formData.gender" value="female">女</label>
            <label class="radio-item">
              <input type="radio" name="gender" v-model="formData.gender" value="secret">保密</label>
          </div>
        </div>

        <!-- 出生年月 -->
        <div class="form-group">
          <label for="birthday">出生年月 <span class="required">*</span></label>
          <input type="date" id="birthday" v-model="formData.birthday" required :max="maxDate" :min="minDate">
          <p class="hint">请选择你的出生年月日</p>
        </div>

        <!-- 学制阶段 - 改为只读显示 -->
        <div class="form-group">
          <label>学制阶段 <span class="required">*</span></label>
          <div class="read-only-value">
            {{ stageName }}
          </div>
        </div>

        <!-- 年级 - 改为只读显示 -->
        <div class="form-group">
          <label>年级 <span class="required">*</span></label>
          <div class="read-only-value">
            {{ gradeName }}
          </div>
        </div>

        <!-- 地区选择（级联） -->
        <!-- 修复地区选择器的HTML结构 -->
        <div class="form-group region-group">
          <label>所在地 <span class="required">*</span></label>
          <div class="region-selectors">
            <select v-model="formData.country" @change="resetRegion('province')" required>
              <option value="">国家</option>
              <option value="China">中国</option>
              <!-- 可扩展其他国家 -->
            </select>
        
            <select v-model="formData.province" @change="resetRegion('city')" :disabled="!formData.country" required>
              <option value="">省份</option>
              <option v-for="prov in provinces" :value="prov">
                {{ prov }}
              </option>
            </select>
        
            <select v-model="formData.city" @change="resetRegion('district')" :disabled="!formData.province" required>
              <option value="">城市</option>
              <option v-for="city in citiesRaw" :value="city">
                {{ city }}
              </option>
            </select>
        
            <input type="text" id="district" v-model.trim="formData.district" placeholder="手动填写县乡村（非必填）"
              maxlength="150">
          </div>
          <p class="hint">精确到城市即可，县区乡镇村可选择性填写</p>
        </div>


        <!-- 学校名称 -->
        <div class="form-group">
          <label for="school">学校名称 <span class="required">*</span></label>
          <input type="text" id="school" v-model.trim="formData.school" placeholder="请输入学校全称（如：北京市第一中学）" required
            maxlength="50">
        </div>

        <!-- 提交按钮 -->
        <div class="form-actions">
          <button type="submit" class="submit-btn">提交信息</button>
          <button type="reset" class="reset-btn" @click="resetForm">重置</button>
        </div>
      </form>

    </div>
  </div>
</template>
<script setup>
import { ref, computed ,onMounted} from 'vue';

// 接收父组件传递的参数
const props = defineProps({
  registerParams: {
    type: Object,
    default: () => ({})
  }
});

// 表单数据
const formData = ref({
  nickname: '',
  gender: 'male',
  birthday: '',
  country: '',
  province: '',
  city: '',
  district: '',
  school: ''
});

const minDate = ref('');
const maxDate = ref('');

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

onMounted(() => {
  const now = new Date();
  // 计算5年前，意味着学生最大年龄为50岁
  const min = new Date(now);
  min.setFullYear(now.getFullYear() - 50);
  minDate.value = formatDate(min);
  // 计算5年前，意味着学生最小年龄为5岁
  const max = new Date(now);
  max.setFullYear(now.getFullYear() - 5);
  maxDate.value = formatDate(max);
});

const provinces = ref([
  '北京市', '天津市', '河北省', '山西省', '内蒙古自治区',
  '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省',
  '浙江省', '安徽省', '福建省', '江西省', '山东省',
  '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区',
  '海南省', '重庆市', '四川省', '贵州省', '云南省',
  '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区',
  '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'
]);

// 城市数据按省份分组
const citiesByProvince = ref({
  '北京市': ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云区', '延庆区'],
  '天津市': ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '滨海新区', '宁河区', '静海区', '蓟州区'],
  '河北省': ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'],
  '山西省': ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'],
  '内蒙古自治区': ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'],
  '辽宁省': ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'],
  '吉林省': ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边朝鲜族自治州'],
  '黑龙江省': ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭地区'],
  '上海市': ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '奉贤区', '崇明区'],
  '江苏省': ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'],
  '浙江省': ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
  '安徽省': ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市', '池州市', '宣城市'],
  '福建省': ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'],
  '江西省': ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'],
  '山东省': ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'],
  '河南省': ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市', '济源市'],
  '湖北省': ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市', '恩施土家族苗族自治州', '仙桃市', '潜江市', '天门市', '神农架林区'],
  '湖南省': ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西土家族苗族自治州'],
  '广东省': ['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'],
  '广西壮族自治区': ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'],
  '海南省': ['海口市', '三亚市', '三沙市', '儋州市', '五指山市', '琼海市', '文昌市', '万宁市', '东方市', '定安县', '屯昌县', '澄迈县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'],
  '重庆市': ['万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '綦江区', '大足区', '渝北区', '巴南区', '黔江区', '长寿区', '江津区', '合川区', '永川区', '南川区', '璧山区', '铜梁区', '潼南区', '荣昌区', '开州区', '梁平区', '武隆区', '城口县', '丰都县', '垫江县', '忠县', '云阳县', '奉节县', '巫山县', '巫溪县', '石柱土家族自治县', '秀山土家族苗族自治县', '酉阳土家族苗族自治县', '彭水苗族土家族自治县'],
  '四川省': ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'],
  '贵州省': ['贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', '铜仁市', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'],
  '云南省': ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州', '大理白族自治州', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州'],
  '西藏自治区': ['拉萨市', '日喀则市', '昌都市', '林芝市', '山南市', '那曲市', '阿里地区'],
  '陕西省': ['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'],
  '甘肃省': ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏回族自治州', '甘南藏族自治州'],
  '青海省': ['西宁市', '海东市', '海北藏族自治州', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'],
  '宁夏回族自治区': ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'],
  '新疆维吾尔自治区': ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市', '昌吉回族自治州', '博尔塔拉蒙古自治州', '巴音郭楞蒙古自治州', '阿克苏地区', '克孜勒苏柯尔克孜自治州', '喀什地区', '和田地区', '伊犁哈萨克自治州', '塔城地区', '阿勒泰地区', '石河子市', '阿拉尔市', '图木舒克市', '五家渠市', '北屯市', '铁门关市', '双河市', '可克达拉市', '昆玉市', '胡杨河市', '新星市'],
  '台湾省': ['台北市', '新北市', '桃园市', '台中市', '台南市', '高雄市', '基隆市', '新竹市', '嘉义市', '新竹县', '苗栗县', '彰化县', '南投县', '云林县', '嘉义县', '屏东县', '宜兰县', '花莲县', '台东县', '澎湖县', '金门县', '连江县'],
  '香港特别行政区': ['中西区', '东区', '南区', '湾仔区', '九龙城区', '观塘区', '深水埗区', '黄大仙区', '油尖旺区', '离岛区', '葵青区', '北区', '西贡区', '沙田区', '大埔区', '荃湾区', '屯门区', '元朗区'],
  '澳门特别行政区': ['花地玛堂区', '圣安多尼堂区', '大堂区', '望德堂区', '风顺堂区', '嘉模堂区', '圣方济各堂区']
});

// 根据选择的省份计算城市列表
const citiesRaw = computed(() => {
  if (!formData.value.province) return [];
  return citiesByProvince.value[formData.value.province] || [];
});


// 重置地区选择的方法
// 修复resetRegion函数，添加对country的处理
const resetRegion = (level) => {
  switch (level) {
    case 'country':
      formData.value.country = '';
      // 继续重置省份及以下
    case 'province':
      formData.value.province = '';
      // 继续重置城市及以下
    case 'city':
      formData.value.city = '';
      // 继续重置县区及以下
    case 'district':
      formData.value.district = '';
      break;
  }
};

// 使用props中的参数设置学制阶段和年级名称
const stageName = computed(() => {
  const stageMap = {
    primary: '小学部',
    junior: '初中部',
    senior: '高中部',
    college: '大学部'
  };
  return stageMap[props.registerParams.stage] || '小学部';
});

const gradeName = computed(() => {
  const grade = props.registerParams.grade || 'primary-1';
  return grade.includes('-') ? grade.split('-')[1] + '年级' : '一年级';
});

// 重置表单
const resetForm = () => {
  formData.value = {
    nickname: '',
    gender: 'male',
    birthday: '',
    country: '',
    province: '',
    city: '',
    district: '',
    school: ''
  };
};

// 提交表单处理
const handleSubmit = () => {
  // 表单提交逻辑
  console.log('提交的表单数据:', formData.value);
  alert('表单提交成功！');
};
</script>

<style scoped>
/* 在样式部分添加只读值的样式 */
.read-only-value {
  padding: 10px 12px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  flex: 1;
  max-width: 300px;
  height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* 主容器样式 */
.student-register-container {
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.student-register-header {
  text-align: center;
  margin-bottom: 30px;
}

.student-register-header h1 {
  font-size: 28px;
  color: #3498db;
  margin-bottom: 10px;
}

.student-register-header p {
  font-size: 16px;
  color: #7f8c8d;
}

.student-register-form {
  padding: 30px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 将label和输入框放在同一行的关键修改 */
.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

/* 修改label样式 */
label {
  display: inline-block;
  width: 120px;
  min-width: 120px;
  font-weight: 500;
  color: #333;
  line-height: 36px; /* 与输入框高度对齐 */
}

/* 修改输入框和选择框样式 */
input,
select {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
  height: 36px;
  box-sizing: border-box;
}



/* 性别单选框组特殊处理 */
.radio-group {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 5px 0;
  align-items: center;
}

/* 地区选择器调整 */
.region-group label {
  flex: 0 0 120px;
}

/* 修改地区选择器的网格布局 */
.region-group .region-selectors {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
}

/* 设置输入框跨越所有列 */
#district {
  grid-column: 1 / -1;
  width: 100%;
}
#birthday, #school {
  max-width: 300px;
}

/* 提示文本调整 */
.hint {
  margin-top: 5px;
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  padding-left: 130px;
}

/* 保持原有的其他样式 */
input:focus,
select:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* 响应式设计调整 */
@media (max-width: 768px) {
  .region-group .region-selectors {
    grid-template-columns: 1fr 1fr;
  }
  
  /* 小屏幕下调整布局 */
  .form-group {
    flex-direction: column;
  }
  
  label {
    width: 100%;
    min-width: auto;
    line-height: normal;
  }
  
  input,
  select {
    min-width: auto;
  }
  
  .radio-item  {
    line-height: 36px;
  }

  .hint {
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .region-group .region-selectors {
    grid-template-columns: 1fr;
  }
}

.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  justify-content: center;
}

.submit-btn {
  flex: 1;
  padding: 12px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
  max-width: 200px;
}

.submit-btn:hover {
  background: #096dd9;
}

.reset-btn {
  flex: 1;
  padding: 12px;
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  max-width: 200px;
}

.reset-btn:hover {
  background: #f0f0f0;
}
</style>